<template>
  <wrap :active.sync="active" @enter="afterScan">
    <div
      slot="right-button"
      class="text-right"
      style="width: 340px; padding-top: 2px"
    >
      <p-button type="primary" @click="setConfigVisible">配置项</p-button>
      <template v-if="currentView === 'barcode'">
        <p-button type="primary" @click="exchangeView('essential')" class="ml10"
          >关键件采集</p-button
        >
        <p-button type="primary" style="margin: 0 10px">半成品入库</p-button>
        <p-button type="primary">生产退料</p-button>
      </template>
      <template v-else>
        <p-button type="primary" @click="exchangeView('barcode')" class="ml10"
          >条码采集</p-button
        >
        <p-button
          type="primary"
          style="margin: 0 10px"
          @click="toPath('/work/datacollect/Packaging')"
          >包装采集</p-button
        >
        <p-button type="primary" @click="toPath('/work/datacollect/Startaging')"
          >老化采集</p-button
        >
      </template>
    </div>
    <template slot="step" slot-scope="props">
      <config-step
        ref="configStep"
        :current="currentStep"
        :type="scanType"
        :station-code="props.params.stationCode"
        class="float-left"
        style="width: 320px"
        size="small"
        @success="setScanOrders"
      />
    </template>
    <template slot-scope="props">
      <component
        ref="view"
        :is="currentView"
        :params="props.params"
        :bar-code="props.barCode"
        @reset="reset"
      />
      <config
        :type="scanType"
        :station-code="props.params.stationCode"
        v-model="configVisible"
        @success="onScanConfigSuccess"
      ></config>
    </template>
  </wrap>
</template>

<script>
import Wrap from "./wrap";
import configMixins from "../modules/configMixins";

export default {
  mixins: [configMixins],
  props: {
    type: {
      type: String,
      default: "barcode",
      validator: (value) => ["barcode", "essential"].includes(value),
    },
  },
  components: {
    Wrap,
    Barcode: () => import("./barcode"),
    Essential: () => import("./essential"),
  },
  data() {
    return {
      active: "collect",
      currentView: "",
      scanType: "barcode",
    };
  },
  watch: {
    type(val) {
      this.currentView = val;
    },
    scanType() {
      this.resetScanResults();
    },
  },
  created() {
    this.currentView = this.type;
  },
  methods: {
    exchangeView(currentView) {
      this.currentView = currentView;
      this.scanType = currentView;
    },
    toPath(url) {
      url && this.$router.push(url);
    },
    afterScan(barCode) {
      this.addScanResults(barCode);
      this.$refs.view.setData(this.scanResults, this.scanOrders);
    },
    resetScanResults() {
      if (this.currentView === "barcode") {
        this.reset();
      }
    },
    reset() {
      this.currentStep = 0;
      this.scanResults = [];
    },
  },
};
</script>
